<template>
	<view class="container">
		<view class="top">
			<u-icon name="arrow-left" color="#fff" size="30" @click="return_btn()"></u-icon>
			<u--text text="我的订单" align="center" color="#fff" size="22" margin="4vh 0 0 0"></u--text>
		</view>
		<view class="bgtop"></view>
		<view class="bar">
			<view v-for="(tab, index) in tabs" :key="index" class="barinfo" :class="{ 'active': activeTab === index }"
				@click="handleTabClick(index)">
				{{ tab }}
			</view>
		</view>
		<view class="card" v-for="order in filteredOrders" :key="order.id || index">
			<view @click="goDetails(order)">
				<view class="head1">
					<u--text :text="'订单号:' + order.number"></u--text>
					<u--text suffixIcon="arrow-right" align="right" color="red"></u--text>
				</view>
				<view class="hr"></view>
				<view class="orderinfo">
					<u--text :text="'服务项目: ' + order.cheService.name" margin='10rpx' size='12px'></u--text>
					<view class="orderinfo1">
						<u--text :text="'服务门店:' + order.cheShop.name" suffixIcon="pushpin-fill" margin="10rpx"
							size='12px'></u--text>

						<u--text text="待支付" align='right' margin="10rpx" size='12px'
							:color="getStatusColor(order.state)" v-if="order.state==0"></u--text>
						<u--text text="待使用" align='right' margin="10rpx" size='12px'
							:color="getStatusColor(order.state)" v-if="order.state==1"></u--text>
						<u--text text="已取消" align='right' margin="10rpx" size='12px'
							:color="getStatusColor(order.state)" v-if="order.state==2"></u--text>
						<u--text text="已退款" align='right' margin="10rpx" size='12px'
							:color="getStatusColor(order.state)" v-if="order.state==3"></u--text>
						<u--text text="待评价" align='right' margin="10rpx" size='12px'
							:color="getStatusColor(order.state)" v-if="order.state==4"></u--text>
						<u--text text="已评价" align='right' margin="10rpx" size='12px'
							:color="getStatusColor(order.state)" v-if="order.state==5"></u--text>
					</view>
					<u--text :text="'下单时间: ' + order.createTime" margin='10rpx' size='12px'></u--text>
					<view class="orderinfo1">
						<u--text :text="'应付: ' + order.realPrice" margin='10rpx' size='12px'></u--text>
						<u-button @click="returnbtn1(order.id)" type="primary" size="small" :customStyle='btnys'
							v-if="order.state === 0">去支付</u-button>
						<u-button @click="returnbtn2(order.id)" type="primary" size="small" :customStyle='btnys'
							v-if="order.state === 2 || order.state === '3'">重新下单</u-button>
						<u-button @click="returnbtn3(order.id)" type="primary" size="small" :customStyle='btnys'
							v-if="order.state === 1">去使用</u-button>
						<u-button @click="returnbtn4(order.id)" type="primary" size="small" :customStyle='btnys'
							v-if="order.state === 4">立即评价</u-button>
						<u-button @click="returnbtn5(order.id)" type="primary" size="small" :customStyle='btnys'
							v-if="order.state === 5">再来一单</u-button>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// id: '',
				userId: 0,
				iconstyle: {

				},
				btnys: {
					'width': '200rpx',
					'background-color': ' #0863e7',
					'margin-left': '20rpx',
					'width': '150rpx'
				},
				activeTab: 0, // 默认选中第一个标签
				tabs: ['全部', '待支付', '待使用', '待评价'], // 标签数组
				orders: [],
			}
		},
		computed: {
			filteredOrders() {
				if (this.activeTab === 0) {
					return this.orders; // 全部订单
				}
				const statusMap = {
					1: 0,
					2: 1,
					3: 4
				};
				return this.orders.filter(order => order.state === statusMap[this.activeTab]);
			}
		},
		onLoad() {
			this.userId = uni.getStorageSync("user_id");
			this.getMyOrder();
		},
		methods: {
			goDetails(order) {
				let state = order.state;
				let id = order.id;
				if (state == 0) {
					uni.$u.route(`/pages/wpc/myorder/dzfdd/dzfdd?id=${id}`);
				}
				if (state == 1) {
					uni.$u.route(`/pages/wpc/myorder/dsydd/dsydd?id=${id}`);
				}
				if (state == 2) {
					uni.$u.route(`/pages/wpc/myorder/yqxdd/yqxdd?id=${id}`);
				}
				if (state == 3) {
					uni.$u.route(`/pages/wpc/myorder/ytkdd/ytkdd?id=${id}`);
				}
				if (state == 4) {
					uni.$u.route(`/pages/wpc/myorder/dpjdd/dpjdd?id=${id}`);
				}
				if (state == 5) {
					uni.$u.route(`/pages/wpc/myorder/ywcdd/ywcdd?id=${id}`);
				}

			},
			getMyOrder() {
				let that = this;
				this.$http({
					url: `/api/management/management/UserId?userId=${that.userId}`,
					method: 'GET',
					success(res) {
						// console.log(res)
						that.orders = res.data.data
						console.log(that.orders)
					}
				})
			},
			handleTabClick(index) {
				this.activeTab = index;
			},
			getStatusColor(status) {
				const colorMap = {
					'待支付': 'blue',
					'待使用': 'blue',
					'待评价': 'blue',
					'已取消': '#c0c0c0',
					'已退款': '#c0c0c0',
					'已完成': 'blue'
				};
				return colorMap[status] || '#000';
			},
			returnbtn1(id) {
				// this.id = id;
				uni.$u.route(`/pages/wpc/myorder/dzfdd/dzfdd?id=${id}`);
			},
			returnbtn2(id) {
				// this.id = id;
				uni.$u.route(`/pages/wpc/myorder/dpjdd/dpjdd?id=${id}`);
			},
			returnbtn3(id) {
				// this.id = id;
				uni.$u.route(`/pages/wpc/myorder/dsydd/dsydd?id=${id}`);
			},
			return_btn() {
				uni.$u.route({
					url: '/pages/my/my',
					type: 'tab'
				});
			}

		}
	}
</script>

<style lang="scss">
	.bgtop {
		width: 100vw;
		background-color: #3183fc;
		height: 400rpx;
		overflow: auto;
	}

	.top {
		z-index: 3;
		width: 100vw;
		background-color: #3183fc;
		height: 150rpx;
		overflow: auto;
		position: fixed;
		top: 0;
		left: 0;

		.u-icon {
			position: fixed;
			top: 4vh;
		}
	}

	.bar {
		width: 90%;
		margin: -250rpx auto 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;


	}

	.barinfo {
		font-size: 35rpx;
		color: #fff;
		padding: 0 10rpx 10rpx 10rpx;
		border-bottom: 5rpx transparent solid; // 默认无下划线
	}

	.barinfo.active {
		border-bottom: 5rpx #fff solid; // 选中时显示白色下划线
	}

	.card {
		width: 95%;
		box-sizing: border-box;
		// height: 450rpx;
		margin: 10px auto;
		position: relative;
		border-radius: 20rpx;
		background-color: #fff;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
		padding: 30rpx 25rpx;

		.head1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.hr {
		margin-top: 30rpx;
		border: 2px solid #f3f3f3;
		border-radius: 2px;
	}

	.orderinfo1 {
		display: flex;

	}
</style>